<template>
  <div class="memberManagement">
    <div class="top">
      <div class="left" @click="addMember"><i></i>添加成员</div>
      <div class="right">
        <input placeholder="输入员工姓名" v-model="search_name" @input="searchMember" type="text"/>
        <i></i>
      </div>
    </div>
    <div class="content">
      <div class="memberManagement-left">
        <el-tree
          :data="deptTree"
          node-key="id"
          default-expand-all
          :props="props"
          :check-on-click-node="true"
          :expand-on-click-node="false"
          @node-click="dept_click"
          :render-content="renderContent">
        </el-tree>
      </div>
      <div class="memberManagement-right">
        <ul class="title-list">
          <li>姓名</li>
          <li>手机号</li>
          <li>所属部门</li>
          <li>APP账号</li>
          <li>用户级别</li>
          <li>状态</li>
          <li>编辑</li>
        </ul>
        <div class="user-list">
          <vuescroll :ops="ops">
            <ul v-for="(item,index) in member_list" :key="index">
              <li v-if="item.headImage">
                  <span  class="header-img"
                         :style="{backgroundImage: 'url('+item.headImage +')'}"></span>{{item.name}}
              </li>
              <li v-if="!item.headImage">
                <span  class="default-img"></span>{{item.name}}
              </li>
              <li>{{item.phone}}</li>
              <li>{{item.departmentName}}</li>
              <li>{{item.phone}}</li>
              <li>{{item.level==1?'高级':'普通'}}</li>
              <li>{{item.status==1?'启用':'禁用'}}</li>
              <li>
                <i class="edit_icon" @click="edit_member(item)"></i>
              </li>
            </ul>
          </vuescroll>
        </div>
      </div>
    </div>
    <div v-if="is_addMember">
      <addMember @close="close_addMember" @update="query_member_list" :title="addMember_title"
                 :data="addMember_data"></addMember>
    </div>
    <div v-if="is_addDept">
      <div class="addDept">
        <div class="addDept-inner">
          <div class="title">{{addDept_type==1?'新增部门':'编辑部门'}}
            <i @click="is_addDept=false"></i></div>
          <div class="row">
            <label>部门</label>
            <input type="text" v-model="dept_name" placeholder="请输入部门名称"/>
          </div>
          <div class="btn" @click="save_add_dept">保存</div>
        </div>
      </div>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import addMember from '@/components/addMember/index';
  import vuescroll from 'vuescroll'
  import loading from '@/components/loading'
  let id = 1000;
  export default {
    name: "MemberManagement",
    components: {
      addMember, vuescroll,loading
    },
    data() {
      return {
        is_show_loading:true,
        search_departmentId:'',
        cur_dept_data:'',//当前点击的部门数据
        dept_name:'',//修改或者新增的部门名称
        addDept_type:1,//
        props:{label:'name'},
        timerIndex: '',
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '40px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        is_addDept:false,
        is_addMember: false,
        member_list: [],//成员列表
        addMember_title: '',
        addMember_data: '',
        search_name: '',
        deptTree: [],
        include:true,
      }
    },
    created() {
      this.query_member_list();
      this.get_deptTree();
    },
    methods: {
      //点击部门节点
      dept_click(data,node,item){
        console.log(data);
        if(data.level==1){
          this.include=true;
        }else {
          this.include=false;
        }
        this.search_departmentId=data.id;
        this.query_member_list();
      },
      //保存部门
      save_add_dept(){
        let params={
          name:this.dept_name,
        };
        if(this.addDept_type==2){
          params.id=this.cur_dept_data.id;
          this.$http.post('user/department/update',params).then(res=>{
            if(res.statusCode==200){
              this.$message.success('编辑成功');
              this.is_addDept=false;
              this.get_deptTree();
            }else {
              this.$message.error(res.statusMsg);
            }
          });
        }else if(this.addDept_type==1){
          params.companyId=this.$store.state.userInfo.companyId;
          params.parentId=this.cur_dept_data.id;
          this.$http.post('user/department/add',params).then(res=>{
            if(res.statusCode==200){
              this.$message.success('新增成功');
              this.is_addDept=false;
              this.get_deptTree();
            }else {
              this.$message.error(res.statusMsg);
            }
          });
        }

      },
      //查询部门tree
      get_deptTree() {
        this.$http.post('user/department/deptTree', {
          comId: this.$store.state.userInfo.companyId,
        }).then(res => {
          if (res.statusCode == 200) {
            this.deptTree = [res.data];
          } else {
            this.$message.error(res.statsuMsg);
          }
        })
      },
      //查询成员列表
      query_member_list() {
        this.$http.get('user/user/list', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            name: this.search_name,
            queryAll: true,
            departmentId:this.search_departmentId,
            include:this.include
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.member_list = res.data;
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //添加部门成员
      addMember() {
        this.addMember_data = {};
        this.addMember_title = '新增用户信息';
        this.is_addMember = true;
      },
      close_addMember() {
        this.is_addMember = false;
      },
      //编辑成员
      edit_member(item) {
        this.addMember_title = '编辑用户信息';
        this.addMember_data = item;
        this.is_addMember = true;
      },
      //搜索成员
      searchMember() {
        clearTimeout(this.timerIndex);
        this.timerIndex = setTimeout(() => {
          this.query_member_list();
        }, 1000)
      },
      //添加部门
      append(data) {
        this.dept_name="";
        this.cur_dept_data=data;
        this.addDept_type=1;//1新增 2编辑
        this.is_addDept=true;
        console.log(data);
        return;
        const newChild = {id: id++, label: 'testtest', children: []};
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      //删除部门
      remove(node, data) {
        let _this=this;
        if(data.name=="无归属部门"){
          this.$message.error('该部门不可删除!');
          return;
        }
        this.$confirm('删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$http.post('user/department/delete',{id:data.id}).then(res=>{
            if(res.statusCode==200){
              _this.$message.success('删除成功');
              _this.get_deptTree();
            }else {
              _this.$message.error(res.statusMsg);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        return;
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      //编辑部门
      edit(node, data) {
        this.dept_name=data.name;
        console.log(data);
        this.cur_dept_data=data;
        this.addDept_type=2;//1新增 2编辑
        this.is_addDept=true;
      },
      renderContent(h, {node, data, store}) {
        console.log(node);
        return (
          <span class="custom-tree-node">
          <span class="text">{node.label}</span>
          <span class="btns">
            <div class="btn icon_edit" v-show={node.level!=1?true:false} on-click={ () => this.edit(node, data) }></div>
            <div class="btn icon_add" on-click={ ()=> this.append(data) }></div>
            <div class="btn icon_del"  v-show={node.level!=1?true:false} on-click={ () => this.remove(node, data) }></div>
          </span>
        </span>);
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .memberManagement {
    width: 100%;
    height: 100%;
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
    position: relative;
    > .top {
      height: 88px;
      padding: 0 24px;

      .left {
        float: left;
        padding-top: 37px;
        padding-left: calc(45px - 24px);
        font-size: 14px;
        color: #96A2AA;
        position: relative;
        cursor: pointer;

        i {
          position: absolute;
          width: 12px;
          height: 12px;
          left: 0;
          top: 38px;
          background-image: url("../../../assets/img/ht/ic_add2.png");
          background-size: cover;
          background-position: center;
        }
      }

      .right {
        margin-top: 24px;
        float: right;
        width: 320px;
        height: 40px;
        background-color: #F2F6F9;
        border-radius: 6px;
        position: relative;

        > input {
          height: 40px;
          line-height: 40px;
          border: none;
          width: 280px;
          background: none;
          text-indent: 16px;
          font-size: 14px;
        }

        > i {
          position: absolute;
          width: 18px;
          height: 18px;
          right: 12px;
          top: 12px;
          cursor: pointer;
          background-image: url("../../../assets/img/ht/member/ic_search.png");
        }
      }
    }

    .content {
      height: calc(100% - 88px);
      display: flex;

      .memberManagement-left {
        width: 360px;
        margin-right: 24px;
      }

      .memberManagement-right {
        width: calc(100% - 360px - 24px);

        .title-list {
          height: 48px;
          background-color: #F2F6F9;
          line-height: 48px;
          display: flex;

          li {
            flex: 1;
            text-align: center;
            color: #96A2AA;
            font-size: 14px;
          }
        }

        .user-list {
          height: calc(100% - 48px);

          ul {
            display: flex;

            li {
              flex: 1;
              text-align: center;
              line-height: 80px;
              height: 80px;
              font-size: 14px;

              > .header-img {
                display: inline-block;
                background-size: cover;
                width: 32px;
                height: 32px;
                border-radius: 4px;
                vertical-align: middle;
                margin-right: 15px;
              }
              >.default-img{
                display: inline-block;
                background-size: cover;
                width: 32px;
                height: 32px;
                border-radius: 4px;
                vertical-align: middle;
                margin-right: 15px;
                background-image: url("../../../assets/img/ic_dh_tx.png");
                background-repeat: no-repeat;
                background-position: center;
              }
              > i {
                width: 20px;
                height: 20px;
                display: inline-block;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                cursor: pointer;
                vertical-align: middle;
              }

              > .edit_icon {
                background-image: url("../../../assets/img/ht/member/ic_me_edit.png");
              }

              > .del_icon {
                background-image: url("../../../assets/img/ht/member/ic_me_delete.png");
              }
            }
          }
        }

      }
    }
    .addDept{
      background-color: rgba(0,0,0,0.5);
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      .addDept-inner{
        position: absolute;
        width: 527px;
        height: 196px;
        border-radius: 6px;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: #ffffff;
        padding: 32px 32px 24px 32px;
        box-sizing: border-box;
        .title {
          font-size: 16px;
          color: #454a55;
          position: relative;
          height: 48px;
          font-weight: bold;
          padding-bottom: 32px;

          > i {
            background-size: 16px 17px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            width: 16px;
            height: 17px;
            background-image: url("../../../assets/img/close_icon.png");
            top: 0px;
            right: 0px;
            cursor: pointer;
          }
        }
        .row {
          label {
            text-align: right;
            display: inline-block;
            width: 100px;
            padding-right: 12px;
          }

          input {
            width: 320px;
            height: 38px;
            line-height: 38px;
            border: 1px solid #F2F6F9;
            background-color: #F2F6F9;
            border-radius: 6px;
            text-indent: 16px;
          }
        }
        > .btn {
          width: 88px;
          height: 32px;
          line-height: 32px;
          background-color: #0755DB;
          border-radius: 6px;
          text-align: center;
          color: #ffffff;
          float: right;
          margin-top: 24px;
          margin-right: 40px;
          cursor: pointer;
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .memberManagement{
    .custom-tree-node{
      width: 100%;
      position: relative;
      .btns{
        position: absolute;
        right: 24px;
        top: 0;
        .btn{
          display: inline-block;
          width: 12px;
          height: 12px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-left: 18px;
        }
        .icon_add{
          background-image: url("../../../assets/img/ht/member/ic_add.png");
        }
        .icon_edit{
          background-image: url("../../../assets/img/ht/member/ic_edit.png");
        }
        .icon_del{
          background-image: url("../../../assets/img/ht/member/ic_deletefill.png");
        }
      }

    }
    .el-tree-node__content{
      height: 48px;
    }
  }
  .is-current{
    >.el-tree-node__content{
      >.custom-tree-node{
        color: #0a52e4!important;
      }
    }

  }

</style>
